<style lang="scss">
	page {
		// overflow: hidden;
	}

	.content {
		color: #3d3d3d;
	}

	.box {
		width: 100%;
		height: 60rpx;
		margin-top: 10%;


		.chooseSet {
			height: 100%;
			width: 95%;
			margin-left: 4%;
			margin-top: 6%;
		}

		.tiemSet view {}

		.swichChoose {
			float: right;
			margin-right: 3%;
		}

		.font {
			font-size: 25rpx;
			margin-left: 4%;
		}
	}
</style>
<template>
	<view class="content">
		<view class='box'>
			<view class="chooseSet timeSet">
				<text>清单设置:</text>
			</view>
			<u-line color="#000000" />
			<view class="chooseSet timeSet">
				<text>删除完成的任务</text>
				<switch color="#00ff23" style="transform:scale(0.7);" class="swichChoose" :checked="switchChoose"
					@change="" />
			</view>
			<u-line color="#aaad99" />
			<view class="chooseSet timeSet">
				<text>番茄钟设置:</text>
			</view>
			<u-line color="#000000" />
			<view class="chooseSet timeSet">
				<text>番茄钟设置时长</text>
				<picker mode="selector" class="font" style="display: inline-block;" @change="PickerChange"
					:value="index" :range="array">
					<text>专注时间:{{ work }}分钟</text>
				</picker>
				<picker mode="selector" class="font" style="display: inline-block;" @change="PickerChange2"
					:range="array2">
					<text>休息时间:{{ rest }}分钟</text>
				</picker>
			</view>
			<u-line color="#aaad99" />
			<view class="chooseSet timeSet">
				<text>专注时使用手机提醒</text>
				<switch color="#00ff23" style="transform:scale(0.7);" class="swichChoose" :checked="switchChoose"
					@change="switch1" />
			</view>
			<u-line color="#aaad99" />
			<view class="chooseSet timeSet">
				<text>专注时省电模式</text>
				<switch color="#00ff23" style="transform:scale(0.7);" class="swichChoose" @change="switch2"
					:checked="switchChoose2" />
			</view>
			<u-line color="#aaad99" />
			<view class="chooseSet timeSet">
				<text>更多:</text>
			</view>
			<u-line color="#000000" />
			<view class="chooseSet timeSet">
				<text>使用教程与介绍</text>
			</view>
			<u-line color="#aaad99" />
			<view class="chooseSet timeSet">
				<text>关于更多</text>
			</view>
			<u-line color="#aaad99" />
		</view>
		<NavigationBar color="#fedecd" page="2" />
	</view>
</template>

<script>
	import cache from '../../util/cache';
	import NavigationBar from '../components/NavigationBar/NavigationBar.vue'
	export default {
		data() {
			return {
				time: true,
				index: 0,
				array: [],
				array2: [],
				work: 0,
				rest: 0,
				switchChoose: true,
				switchChoose2: true,
			};
		},
		methods: {
			PickerChange(e) {
				let res = this.array[e.detail.value];
				this.work = res;
				cache.setCahe('Tomato_work', res * 60);
				this.tips('修改成功');
			},
			PickerChange2(e) {
				let res = this.array2[e.detail.value];
				this.rest = res;
				cache.setCahe('Tomato_rest', res * 60);
				this.tips('修改成功');
			},
			tips(str) {
				uni.showToast({
					title: str,
					duration: 2000,
					icon: 'none'
				});
			},
			switch1(e) {
				cache.setCahe('Screensavers', e.detail.value);
			},
			switch2(e) {
				cache.setCahe('Solid on', e.detail.value)
			},
			cacheTiem() {
				let arr = [];
				let arr2 = [];
				for (let i = 25; i < 60; i++) {
					arr.push(i);
				}
				for (let i = 1; i < 60; i++) {
					arr2.push(i);
				}
				this.array = arr;
				this.array2 = arr2;
			},
			TiemShow() {
				let t = cache.getCahe('Tomato_work');
				let t2 = cache.getCahe('Tomato_rest');
				if (t > 0 && t2 > 0) {
					this.work = Math.floor(t / 60);
					this.rest = Math.floor(t2 / 60);
				}
				this.switchChoose = cache.getCahe('Screensavers');
				this.switchChoose2 = cache.getCahe('Solid on');
			},
		},
		components: {
			NavigationBar
		},
		created() {
			this.cacheTiem();
			this.TiemShow();
		}
	}
</script>